/*
说明：因为客户不懂后台开发，所以就将后台单独打包部署。
客户可以自行修改本文件里面的显示逻辑，遵守示例代码的api调用规则即可。
所有的ajax调用代码中，包含一个success回调函数，它代表请求api成功后需要做的页面处理工作。
返回值res则是一个统一格式的json对象，参见msg.json。
errorCode为0表示正常的结果，其他值代表业务出错。
另外登录与注册的密码，在后台都通过md5加密处理，具备简单的安全性。
 */

/**
 * 调用服务端api实现登录
 * @param data
 * @param needRemember
 */
function loginAjax(data, needRemember) {
    $.ajax({
        url: "http://39.108.48.22:8080/api/user/login",
        type: "post",
        data: data,
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        },
        success: function (res) {
            console.log(res);

            if (res.errorCode === 0) {
                alert("登陆成功，欢迎使用！");
                // 如果勾选了记住密码
                if (needRemember) {
                    // TODO 登录信息保存到客户端
                    console.log("记住了密码，七天内可以自动登录");
                }
                // TODO 找地方显示登陆用户名
                showUserName(res.data.username);

                // 关闭登陆窗口
                $('.cd-user-modal').removeClass("is-visible");
            } else {
                alert(res.errorMsg);
            }
        },
        error: function (err) {
            console.log(err);
            alert("网络错误，请重试！");
            clearForm();
        }
    });
}

/**
 * 调用服务端api实现用户名校验
 * @param data
 * @param dom
 */
function checkUserAjax(data, dom) {
    $.ajax({
        url: "http://39.108.48.22:8080/api/user/check",
        type: "post",
        data: data,
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        },
        success: function (res) {
            if (res.errorCode !== 0) {
                // 如果用户已存在，则显示错误信息
                // TODO alert用户体验不好，建议在表单后面追加错误标签
                alert(res.errorMsg);
                // 并提供建议的用户名
                $(dom).val(res.data.username);
            }
        },
        error: function (err) {
            console.log(err);
            alert("网络错误，请重试！");
        }
    });
}

/**
 * 调用服务端api实现注册
 * @param data
 */
function regAjax(data) {
    $.ajax({
        url: "http://39.108.48.22:8080/api/user/add",
        type: "post",
        data: data,
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        },
        success: function (res) {
            console.log(res);

            if (res.errorCode === 0) {
                alert("注册成功，欢迎使用！");

                // 关闭登陆窗口
                $('.cd-user-modal').removeClass("is-visible");
            } else {
                alert(res.errorMsg);
            }
        },
        error: function (err) {
            console.log(err);
            alert("网络错误，请重试！");
        }
    });
}

/**
 * 调用服务端api实现注销
 */
function logoutAjax() {
    $.ajax({
        url: "http://39.108.48.22:8080/api/user/logout",
        xhrFields: {
            withCredentials: true
        },
        success: function (res) {
            console.log(res);
            if (res.errorCode === 0) {
                $("#show-user").remove();
                // TODO 删除本地cookies
                delCookie("username");
                delCookie("password");
            } else {
                alert(res.errorMsg);
            }
        },
        error: function (err) {
            console.log(err);
            alert("网络错误，请重试！");
        }
    })
}

// 页面初始化
jQuery(function () {
    var loginDiv = $("#cd-login");
    loginDiv && loginDiv.on("click", "[type=submit]", function () {
        var username = $("#signin-username");
        var password = $("#signin-password");
        if (!username.val().trim()) {
            alert("用户名不能为空！");
            username.val("");
            username.focus();
            return false;
        }
        if (!password.val()) {
            alert("密码不能为空！");
            password.focus();
            return false;
        }

        var needRemember = $("#remember-me").prop("checked");
        var data = {
            username: username.val().trim(),
            password: password.val(),
            needRemember: needRemember
        };

        loginAjax(data, needRemember);

        return false;
    });

    var regDiv = $("#cd-signup");
    // 注册用户名表单失去焦点时异步查询用户名是否重复
    $("#signup-username").on("blur", function () {
        var username = $(this).val().trim();
        console.log(username);
        if (!username) {
            return;
        }
        var data = {
            username: username
        };
        checkUserAjax(data, this);
    });

    // 注册表单提交事件
    regDiv && regDiv.on("click", "[type=submit]", function () {
        var isAccepted = $("#accept-terms").prop("checked");
        if (!isAccepted) {
            alert("请阅读并同意《用户协议》！");
            return false;
        }
        var username = $("#signup-username").val().trim();
        var password = $("#signup-password").val();
        var email = $("#signup-email").val().trim();
        if (!username) {
            alert("用户名不能为空！");
            $("#signup-username").focus();
            return false;
        }
        if (!password) {
            alert("密码不能为空！");
            $("#signup-password").focus();
            return false;
        }
        var mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (email && !mailReg.test(email)) {
            alert("邮箱格式错误！");
            $("#signup-email").focus();
            return false;
        }

        var data = {
            username: username,
            password: password,
            email: email
        };

        regAjax(data);

        return false;
    });
    // 注销事件
    $(".nav ul").on("click", "#logout", function () {
        logoutAjax();
    });

    // 更改注册表单的密码框type为password
    $("#signup-password").prop("type", "password");
    // 根据cookies自动填充表单
    var username1 = getCookie("username");
    if (username1) {
        showUserName(username1);
        var username = $("#signin-username");
        var password = $("#signin-password");
        username.val(username1);
        password.val(getCookie("password"));
    } else {
        // 如果浏览器获取不到跨域cookie，则通过服务器请求获取
        fecthServerCookie();
    }
});

/**
 * 清除登录表单
 */
function clearForm() {
    var username = $("#signin-username");
    var password = $("#signin-password");
    username.val("");
    password.val("");
    password.focus();
}

/**
 * 登录成功后显示用户名及注销按钮
 * TODO 这个需要根据客户要求调整显示逻辑
 * @param username
 */
function showUserName(username) {
    $("#show-user").remove();
    $(".nav ul").prepend("<li id='show-user'>" + username + "&nbsp;<span id='logout'>注销</span></li>");
    $("#show-user>span").css({
        "color": "blue",
        "font-style": "italic",
        "font-size": 12,
        "text-decoration": "underline",
        "cursor": "pointer"
    });
    $("#show-user").css({
        "padding-right": "20px"
    });
}

/**
 * 获取本地的cookie
 * @param name
 * @returns {*}
 */
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) {
        return unescape(arr[2]);
    }

    return null;
}

/**
 * 删除本地的cookie
 * @param name
 */
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) {
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    }
}

/**
 * 获取服务器上的cookie
 */
function fecthServerCookie() {
    $.ajax({
        url: "http://39.108.48.22:8080/api/user/getCookie",
        type: "post",
        success: function (res) {
            console.log(res);
            // 服务端没有cookies则退出
            if (res.data == null) {
                return;
            }
            showUserName(res.data.username);
            var username = $("#signin-username");
            var password = $("#signin-password");
            username.val(res.data.username);
            password.val(res.data.password);
        },
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        }
    });
}